<template>
    <el-dialog :title="type == 'add' ? '添加模版' : '修改模版'" v-model="visible" width="400px">
        <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" >
            <el-form-item label="模版名称" prop="title">
                <el-input type="text" v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="开发语言" prop="type">

                <el-select @change="handleOption" v-model="ruleForm.type" size="small">
                    <el-option v-for="item in options" :key="item.id" :label="item.code" :value="item.id" />
                </el-select>

            </el-form-item>
 
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
             
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
    import * as db_context from '@/models/db_context'
    import {
        reactive,
        ref,
        toRefs
    } from 'vue'

    import {
        ElMessage
    } from 'element-plus'
    const {
        Sequelize
    } = window.require('sequelize-typescript');
    export default {
        name: 'DialogAddDb',
        props: {
            type: String, // 用于判断是添加还是编辑
            reload: Function // 添加或修改完后，刷新列表页
        },
        setup(props: any) {
            const formRef = ref < any > (null)
            const state = reactive({
                visible: false,
                tId: "0",
                isTest:0,
                options: [],
                orderStatus: '', // 订单状态
                ruleForm: {
                    title: '',
                    type: '',
                    
                },
                id: ''
            })
            // 获取详情
            const getDetail = (id: string) => {
                console.log(id);
                state.tId = id;
                //state.tId = results;

               
            }

             

             // 获取数据列表
    const getCodeOPtions = async () => {
        const results:any= await db_context.GenCode.getList<db_context.GenCode>();
         state.options=results;

          
    }

            // 开启弹窗
            const open = (id: string) => {
                getCodeOPtions();
                state.visible = true
                if (id) {
                    state.id = id
                    // 如果是有 id 传入，证明是修改模式
                    getDetail(id)
                } else {
                    console.log('1111111111111111')
                    

                }
            }
            // 触发过滤项方法
            const handleOption = () => {
                console.log('gggggggggg')
            }
           

            // 关闭弹窗
            const close = () => {
                state.visible = false
            }
            const submitForm = () => {
                if(state.isTest==0){
                  ElMessage.error('请先测试连接');
                   return;
                }
              
            }
            return {
                ...toRefs(state),
                open,
                close,
                formRef,
                handleOption,
                submitForm
            }
        }
    }
</script>